<script setup>

import moduleJson from "@/components/page/moduleJson"
import dataJson from "@/components/page/dataJson"
import {inject, nextTick, onMounted, reactive, ref, toRaw, toRefs, unref} from "vue";
import {CloseBold, Delete, EditPen, Plus} from "@element-plus/icons-vue";
import MCPService from "@/service/impl/MCPService.js";
import MCPModel from "@/model/MCPModel.js";
import { debounce } from 'lodash-es';


const t = inject('$t')
const message = inject('message')
const data = dataJson()
const module = moduleJson()
const mcpModel = ref(new MCPModel())
const pageTable = ref()
const tag = ref([
    {
        value: 0,
        label: 'stdio'
    },
    {
        value: 1,
        label: 'sse'
    },
    // {
    //     value: 2,
    //     label: 'webFlux'
    // }
])
const json = ref(true)
const activeName = ref('base')

const init = () => {
    MCPService.list(data.value.source()).then(res => {
        data.value.init(res)
    }).catch(e => {

    })
}
const editOpen = (data, index, type) => {
    const fun = {
        0: () => {
            mcpModel.value = new MCPModel()
        },
        1: () => {
            mcpModel.value = data
            mcpModel.value.content = JSON.stringify(JSON.parse(data.content), null, 4);
        }
    }
    activeName.value = 'base'
    fun[type]()
    module.value.dialog.show = true
    module.value.dialog.load = false
}
const editConfirm = () => {
    module.value.dialog.load = true
    MCPService.edit(mcpModel.value).then(res => {
        module.value.dialog.load = false
        module.value.dialog.show = false
        init();
    }).catch(e => {
        module.value.dialog.load = false
    })
}
const delConfirm = (data, index) => {
    MCPService.del(data).then(res => {
        message.success("删除成功")
        init();
    })
}

const checkFormatJsonOnInput = debounce(() => {
    const input = mcpModel.value.content.trim();
    try {
        const parsed = JSON.parse(input);
        JSON.stringify(parsed, null, 4);
        json.value = true
    } catch (error) {
        json.value = false
    }
}, 300);

const formatJsonOnInput = () => {
    const input = mcpModel.value.content.trim();
    try {
        const parsed = JSON.parse(input);
        mcpModel.value.content = JSON.stringify(parsed, null, 4);
    } catch (error) {
    }
};

onMounted(() => {
    module.value.init(MCPService.url.edit, MCPService.url.edit,
        MCPService.url.del, null, null)
    module.value.operations.width = "200px"
    module.value.dialog.width = "40%"
    init()
})

</script>
<template>
    <Page
        @refresh="init"
        :data="data"
        :module="module"
        @edit-open="editOpen"
        @edit-confirm="editConfirm"
        @del-confirm="delConfirm"
        ref="pageTable"
    >
        <template #table>

        </template>
        <template #table-left>
        </template>
        <template #operate-before>
        </template>
        <template #operate-after>
        </template>
        <template #table-column>
            <el-table-column prop="title" label="MCP名称"/>
<!--            <el-table-column prop="sync" label="是否同步">-->
<!--                <template #default="scope">-->
<!--                    {{ scope.row.sync?'同步':'异步' }}-->
<!--                </template>-->
<!--            </el-table-column>-->
            <el-table-column prop="tag" label="传输行为">
                <template #default="scope">
                    {{ tag.filter(i => i.value === scope.row.tag)[0].label }}
                </template>
            </el-table-column>
            <el-table-column prop="createTime" :label="$t('btn.createTime')"/>
        </template>
        <template #after-table-event="row">
        </template>
        <template #table-dialog>
            <el-form :rules="mcpModel.rules" :label-width="110" :label-position="'left'"
                     :model="mcpModel" style="width: 100%;padding: 5px">

                <el-tabs v-model="activeName" >
                    <el-form-item label="MCP集名称" prop="title">
                        <el-input v-model="mcpModel.title" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item label="传输行为">
                        <el-select v-model="mcpModel.tag">
                            <el-option
                                v-for="config in tag"
                                :key="config.value"
                                :label="config.label"
                                :value="config.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否同步" prop="sync" v-if="mcpModel.tag === 0">
                        <el-switch v-model="mcpModel.sync" active-text="同步" inactive-text="异步"/>
                    </el-form-item>
                    <el-form-item label="MCP内容" prop="content" v-if="mcpModel.tag === 0">
                        <el-input
                            v-model="mcpModel.content"
                            show-word-limit
                            type="textarea"
                            resize="none"
                            :rows="12"
                            @input="checkFormatJsonOnInput"
                        />
                        <el-row style="width: 100%">
                            <el-col :span="12">
                                <el-button size="small" type="primary" @click="formatJsonOnInput">格式化</el-button>
                            </el-col>
                            <el-col :span="12" align="right">
                                <el-text v-if="json" style="color: green;font-size: 12px">json格式正确</el-text>
                                <el-text v-if="!json" style="color: red;font-size: 12px">json格式错误</el-text>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="服务地址" prop="address" v-if="mcpModel.tag === 1">
                        <el-col :span="18">
                            <el-input v-model="mcpModel.address" autocomplete="off" placeholder="SSE 地址(http://192.168.1.100:8088)"/>
                        </el-col>
                        <el-col :span="1" />
                        <el-col :span="5">
                            <el-input v-model="mcpModel.sseEndpoint" autocomplete="off" placeholder="SSE 端点(/sse)"/>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="请求头" prop="headers" v-if="mcpModel.tag === 1">
                        <el-input v-model="mcpModel.headers" autocomplete="off" placeholder="key:value,key:value,key:value"/>
                    </el-form-item>
                </el-tabs>
            </el-form>
        </template>
        <template #table-search>

        </template>

    </Page>

</template>

<style lang="scss" scoped>

</style>
